<template>
  <basic-container>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-setting"></i> 发货管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 完成发货
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <avue-form ref="form" v-model="modifyForm" :option="modifyOption">
      <template slot-scope="scope" slot="shipperName">
        <div>
          <el-select v-model="modifyForm.shipperName" placeholder="请选择发货人" @change="handleView">
            <el-option
              v-for="item in shipperList"
              :key="item.id"
              :label="item.shipperName"
              :value="item.shipperName"
            ></el-option>
          </el-select>
        </div>
      </template>
      <template slot-scope="scope" slot="menuForm">
        <el-button type="primary" @click="handleModify" :loading="btnLoading">提 交</el-button>
        <el-button @click="goBack">返 回</el-button>
      </template>
    </avue-form>
    <avue-detail ref="form" v-model="form" :option="formOption"></avue-detail>
    <avue-crud ref="crud" :option="detailOption" :data="detailList"></avue-crud>
    <div>
      <el-button type="primary" @click="goBack">返 回</el-button>
    </div>
  </basic-container>
</template>

<script>
import { fetchInfo, putObj } from "../../api/opc/ship_record";
import { findList } from "../../api/opc/shipper";
import { formOption } from "../../const/crud/opc/form_option/ship_record";
import { formOption as modifyOption } from "../../const/crud/opc/form_option/ship_record_modify";
import { formOption as detailOption } from "../../const/crud/opc/form_option/ship_detail";

export default {
  data() {
    return {
      form: {},
      modifyForm: {},
      formOption: formOption,
      modifyOption: modifyOption,
      detailOption: detailOption,
      detailList: [],
      shipRecordSn: "",
      shipperList: [],
      btnLoading: false
    };
  },
  computed: {},
  mounted() {},
  beforeRouteEnter(to, from, next) {
    next(vm => vm.fetchDetail(vm.$route.query.res.shipRecordSn));
  },
  created() {
    this.modifyOption.group[0].column[6].display = true;
    this.modifyOption.group[0].column[7].display = true;
    this.findShipperList();
  },
  methods: {
    fetchDetail(shipRecordSn) {
      fetchInfo({shipRecordSn:shipRecordSn})
        .then(response => {
          this.modifyForm = response.data.data;
          this.form = this.modifyForm;
          this.detailList = this.form.detailList;
        })
        .catch(() => {
          this.goBack();
        });
    },
    findShipperList(name) {
      let params = {};
      if (name) {
        params.shipperName = name;
      }
      findList(params).then(response => {
        if (response.data.code === 0) {
          this.shipperList = response.data.data.records;
        } else {
          this.$message.warning(response.data.msg);
        }
      });
    },
    handleModify() {
      this.btnLoading = true;
      let params = {
        id: this.modifyForm.id,
        shipperName: this.modifyForm.shipperName,
        shipperTelephone: this.modifyForm.shipperTelephone,
        shipAddress: this.modifyForm.shipAddress,
        shipType: this.modifyForm.shipType,
        logisticsSn: this.modifyForm.logisticsSn,
        logisticsName: this.modifyForm.logisticsName,
        shipTime: this.modifyForm.shipTime,
        shipStatus: this.modifyForm.shipStatus
      };
      putObj(params).then(response => {
        if (response.data.code === 0) {
          this.$message.success("操作成功");
          this.goBack();
        } else {
          this.$message.warning(response.data.msg);
        }
      });
    },
    handleView(value) {
      for (let i = 0, len = this.shipperList.length; i < len; i++) {
        if (value === this.shipperList[i].shipperName) {
          let shipper = this.shipperList[i];
          this.modifyForm.shipperTelephone = shipper.telephone;
          this.modifyForm.shipAddress = shipper.shipAddress;
          break;
        }
      }
    },
    goBack(time = 1000) {
      let that = this;
      setTimeout(function() {
        that.$store.commit("DEL_ONE_TAG", that.$route);
        that.$router.go(-1);
      }, time);
    }
  }
};
</script>

<style scoped lang="scss">
.crumbs {
  margin: 20px 10px;
}
</style>


